{% extends "base.html" %}
<!DOCTYPE html>
<html lang="en">
{% block title %}

    创建一个新项目
{% endblock %}
{% block body %}
    {% block header %}
        {{ super() }}
    {% endblock %}
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul class=flashes>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <!-- Main Content -->
    <main id="main-content">
        <div class="main-section">
            <div class="page-section">
                <div class="profile-pages">
                    <div class="container">
                        <div class="row">
                            <div class="section-fullwidth col-lg-12">
                                <div class="cs-content-holder">
                                    <div class="row">
                                        <div class="cause-holder" style="width: 100%">
                                            <div class="col-lg-12">
                                                <div class="cs-auther">
                                                    <figure>
                                                        <a href="#"><img src="../../static/assets/images/user-image.png"
                                                                         alt="#"></a>
                                                    </figure>
                                                    <div class="text">
                                                        <h3>
                                                            {{ user_name }}
                                                        </h3><span>人人为我，我为人人</span>
                                                    </div>
                                                </div>
                                                <div class="right-sec">
                                                    <ul class="cs-donations">
                                                        <li>
                                                            <span>账户余额</span><strong>￥ {{ user_account }}</strong>
                                                        </li>
                                                        {#                                                        <li>#}
                                                        {#                                                            <span>我捐献的</span><strong>￥ 5,689.00</strong>#}
                                                        {#                                                        </li>#}
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="profile-block">
                                                    <form action="{{ url_for('user.user_add_function') }}" method="post"
                                                          enctype='multipart/form-data'>
                                                        <div class="cs-profile-area">
                                                            <div class="cs-title no-border">
                                                                <h3>
                                                                    创建一个新项目
                                                                </h3>
                                                            </div>
                                                            <div class="cs-profile-holder">
                                                                <div class="gallery-area">
                                                                    <ul class="cs-element-list has-border wout-label">

                                                                        <li>
                                                                            <label>活动封面</label>
                                                                            <input type="file" name="function-cover"
                                                                                   id="ipt" required="required "
                                                                                   placeholder="建议">
                                                                            <span class="char-remain">强烈建议使用大小为：270 x 203 的图片作为封面，图片格式只能为：'png', 'jpg', 'jpeg'</span>
                                                                            <img src="" alt="" id="img">
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <ul class="cs-element-list has-border">
                                                                    <li>
                                                                        <label>活动标题</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-12">
                                                                                <input type="text" name="title"
                                                                                       required="required ">
                                                                                <span class="char-remain">通常来说一个简洁的标题更加吸引人</span>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <label>活动简介</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-12">
                                                                                {#                                                                                <textarea></textarea>#}
                                                                                <input type="text" name="introduction"
                                                                                       required="required">
                                                                                <span class="char-remain">一条不超过20字的项目简介</span>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <li class="multiselect-holder">
                                                                        <label>活动分类</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-6">
                                                                                <select name="type">
                                                                                    <option value="Audio">Audio</option>
                                                                                    <option value="Art">Art</option>
                                                                                    <option value="Music">Music</option>
                                                                                    <option value="Photography">
                                                                                        Photography
                                                                                    </option>
                                                                                    <option value="Culture">Culture
                                                                                    </option>
                                                                                    <option value="Environment">
                                                                                        Environment
                                                                                    </option>
                                                                                    <option value="Education">
                                                                                        Education
                                                                                    </option>
                                                                                    <option value="Human Rights">Human
                                                                                        Rights
                                                                                    </option>
                                                                                    <option value="Wellness">Wellness
                                                                                    </option>
                                                                                    <option value="Writing & Publishing">
                                                                                        Writing & Publishing
                                                                                    </option>
                                                                                    <option value="Transportation">
                                                                                        Transportation
                                                                                    </option>
                                                                                    <option value="Food & Beverages">
                                                                                        Food & Beverages
                                                                                    </option>
                                                                                    <option value="Fashion & Wearables">
                                                                                        Fashion & Wearables
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                                <ul class="cs-element-list has-border">
                                                                    <li>
                                                                        <label>需要众筹的金额</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-6">
                                                                                <input type="number" name="money">
                                                                            </div>
                                                                            <div class="field-col col-md-2">
                                                                                <div class="select-holder">
                                                                                    <select>
                                                                                        <option>
                                                                                            ￥
                                                                                        </option>
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <label>需要众筹的时间</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-2">
                                                                                <input type="number" name="days"
                                                                                       placeholder="输入整数天">
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <label>活动内容</label>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-12">
                                                                                <textarea name="content" id="editor"
                                                                                          required="required">
                                                                                    <h2>The three greatest things you learn from traveling</h2>
              <p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
              <figure class="image image-style-align-right image_resized illustration" style="width:50%"><img alt="Three Monks walking on ancient temple." src="https://cloud-lhq-2080.oss-cn-chengdu.aliyuncs.com/test/test2/img.jpg" >
                <figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
              </figure>
              <h3>Appreciation of diversity</h3>
              <p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
              <blockquote>
                <p>The real voyage of discovery consists not in seeking new landscapes, but having new eyes.</p>
                <p><strong>Marcel Proust</strong></p>
              </blockquote>
              <h3>Improvisation</h3>
              <p>Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist; but when it comes to executing it, something always comes up and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks now:</p>
              <ul class="todo-list">
                <li>
                  <label class="todo-list__label">
                    <input type="checkbox" checked="checked"><span class="todo-list__label__description">buy the ticket</span>
                  </label>
                </li>
                <li>
                  <label class="todo-list__label">
                    <input type="checkbox" checked="checked"><span class="todo-list__label__description">start your adventure</span>
                  </label>
                </li>
              </ul>
              <h3>Confidence</h3>
              <p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
                                                                                </textarea>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                                <ul class="cs-element-list cs-submit-form">
                                                                    <li>
                                                                        <div class="fields-area">
                                                                            <div class="field-col col-md-4">
                                                                                <input class="csbg-color cs-btn"
                                                                                       type="submit" value="创建新项目">
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <!-- <div class="login-inner"><ul class="scroll-nav"><li class="active"><a href="#"><i class="icon-star-o"></i>My Cuases</a></li><li><a href="#"><i class="icon-star-o"></i>Saved Causes</a></li><li><a href="#"><i class="icon-star-o"></i>My Donation</a></li><li><a href="#"><i class="icon-star-o"></i>Profile Settings</a></li><li><a href="#"><i class="icon-star-o"></i>Create New</a></li><li><a href="#"><i class="icon-star-o"></i>Sign Out</a></li></ul><div class="main-content-in"><div class="cs-section-title"><h2>Create a new Cause</h2></div><ul class="cs-form-element has-border galleryupload"><li class="featured-image image-1"><div class="upload-file-container"><img src="assets/extra-images/gallry1.jpg" alt="#"><a title="Delete image" class="delete" data-id="1" href="javascript:;"><i class="icon-times"></i></a></div></li><li class="gallery-thumb"><div id="campaigs_images_container"><ul class="campaigs_images"><li class="image-2"><img src="assets/extra-images/gallry2.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry3.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry4.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry5.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry6.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry7.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry8.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li><li class="image-2"><img src="assets/extra-images/gallry9.jpg" alt="#"><a title="Delete image" class="delete" data-id="2" href="javascript:;"><i class="icon-times"></i></a></li></ul></div></li></ul><ul class="cs-form-element has-border title-left multiselect-holder upload-file"><li><label for="Autotrader">Property Title</label><div class="inner-sec"><p><input type="text"></p><small>Strong orca harshly exuberantly oh bird wherever</small></div></li><li><label for="Autotrader">Property Title</label><div class="inner-sec"><textarea></textarea></div></li><li class="categories"><label for="categories">categories</label><div class="inner-sec nano-slider"><select id="categories" class="multiselect" multiple="multiple" name="countries[]"><option value="AFG">Afghanistan</option><option value="ALB">Albania</option><option value="DZA">Algeria</option><option value="AND">Andorra</option><option value="ARG">Argentina</option><option value="ARM">Armenia</option><option value="ABW">Aruba</option><option value="AUS">Australia</option><option value="AUT" selected="selected">Austria</option><option value="AZE">Azerbaijan</option><option value="BGD">Bangladesh</option><option value="BLR">Belarus</option><option value="BEL">Belgium</option><option value="BIH">Bosnia and Herzegovina</option><option value="BRA">Brazil</option><option value="BRN">Brunei</option><option value="BGR">Bulgaria</option><option value="CAN">Canada</option><option value="CHN">China</option><option value="COL">Colombia</option><option value="HRV">Croatia</option><option value="CYP">Cyprus</option><option value="CZE">Czech Republic</option><option value="DNK">Denmark</option><option value="EGY">Egypt</option><option value="EST">Estonia</option><option value="FIN">Finland</option><option value="FRA">France</option><option value="GEO">Georgia</option><option value="DEU" selected="selected">Germany</option><option value="GRC">Greece</option><option value="HKG">Hong Kong</option><option value="HUN">Hungary</option><option value="ISL">Iceland</option><option value="IND">India</option><option value="IDN">Indonesia</option><option value="IRN">Iran</option><option value="IRL">Ireland</option><option value="ISR">Israel</option><option value="ITA">Italy</option><option value="JPN">Japan</option><option value="JOR">Jordan</option><option value="KAZ">Kazakhstan</option><option value="KWT">Kuwait</option><option value="KGZ">Kyrgyzstan</option><option value="LVA">Latvia</option><option value="LBN">Lebanon</option><option value="LIE">Liechtenstein</option><option value="LTU">Lithuania</option><option value="LUX">Luxembourg</option><option value="MAC">Macau</option><option value="MKD">Macedonia</option><option value="MYS">Malaysia</option><option value="MLT">Malta</option><option value="MEX">Mexico</option><option value="MDA">Moldova</option><option value="MNG">Mongolia</option><option value="NLD" selected="selected">Netherlands</option><option value="NZL">New Zealand</option><option value="NGA">Nigeria</option><option value="NOR">Norway</option><option value="PER">Peru</option><option value="PHL">Philippines</option><option value="POL">Poland</option><option value="PRT">Portugal</option><option value="QAT">Qatar</option><option value="ROU">Romania</option><option value="RUS">Russia</option><option value="SMR">San Marino</option><option value="SAU">Saudi Arabia</option><option value="CSG">Serbia and Montenegro</option><option value="SGP">Singapore</option><option value="SVK">Slovakia</option><option value="SVN">Slovenia</option><option value="ZAF">South Africa</option><option value="KOR">South Korea</option><option value="ESP">Spain</option><option value="LKA">Sri Lanka</option><option value="SWE">Sweden</option><option value="CHE">Switzerland</option><option value="SYR">Syria</option><option value="TWN">Taiwan</option><option value="TJK">Tajikistan</option><option value="THA">Thailand</option><option value="TUR">Turkey</option><option value="TKM">Turkmenistan</option><option value="UKR">Ukraine</option><option value="ARE">United Arab Emirates</option><option value="GBR">United Kingdom</option><option value="USA" selected="selected">United States</option><option value="UZB">Uzbekistan</option><option value="VAT">Vatican City</option><option value="VNM">Vietnam</option></select></div></li></ul><ul class="has-border title-left cs-form-element half-input"><li><label for="Autotrader">Property Title</label><div class="inner-sec"><p><input type="text" placeholder="Enter Amount"></p><div class="select-holder small-slect"><select><option>$</option><option>$</option><option>$</option><option>$</option><option>$</option></select></div></div></li><li><label for="Autotrader">Property Title</label><div class="inner-sec"><div class="select-holder small-slect"><select><option>$</option><option>$</option><option>$</option><option>$</option><option>$</option></select></div><div class="select-holder small-slect"><select><option>$</option><option>$</option><option>$</option><option>$</option><option>$</option></select></div><div class="select-holder medium-slect"><select><option>YYYY</option><option>YYYY</option><option>YYYY</option><option>YYYY</option><option>YYYY</option></select></div></div></li><li><label for="Autotrader">Tags</label><div class="inner-sec"><span class="icon-input"><a href="#" id="csload_list"><i class="icon-plus3"></i></a><p><input id="csappend" type="text" class="text-input"></p></span><ul class="cs-tags-selection"></ul></div></li></ul><div class="form-title"><h4>Update Password</h4></div><ul class="has-border title-left cs-form-element half-input"><li><label for="Autotrader">Property Title</label><div class="inner-sec"><p><input type="text"></p></div></li><li><label for="Autotrader">Property Title</label><div class="inner-sec"><p><input type="text"></p></div></li><li><label for="Autotrader">Property Title</label><div class="inner-sec"><p><input type="text"></p><small>Update your avatar manually,If the not set the default Gravatar will be the same as yor.</small></div></li></ul><ul class="has-border cs-form-element title-left half-input"><li><label for="Autotrader">PayPal Email</label><div class="inner-sec"><p><input type="text" placeholder="Enter Valid Email Address"></p><img src="assets/extra-images/login-logo.png" alt=""><small>Strong orca harshly exuberantly oh bird wherever</small></div></li></ul><ul class="cs-form-element cs-submit-form title-left"><li><label>Terms & <br>Conditions</label><div class="inner-sec"><p>Asome decently militantly versus that a enormous less treacherous genially well upon until fishy audaciously where fabulously underneath toucan armadillo far toward illustratively flawlessly shark much a emoted hey tersely pointedly much that hey quetzal up trenchant abundant made alas wildebeest overate overhung during busily burst as jeez much because more added on some thrust out.</p><div class="cs-checkbox"><input type="checkbox" value="use-of-pool_feature_1420729390" name="dir_cusotm_field[cs_feature_list][]" id="cs_feature_list_1420729390"><label for="cs_feature_list_1420729390">Accept <a href="#">terms and conditions</a></label></div><p class="has-icon"><input type="submit" value="Create new Cause"></p></div></li></ul></div></div>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main><!--// Main Content //--><!--// Footer Widget //-->

    {#</div><!-- jQuery (necessary JavaScript) -->#}
    {#<script src="../../static/assets/scripts/jquery.js"></script>#}
    {#<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>#}
    {#<script src="../../static/assets/scripts/bootstrap.min.js"></script>#}
    {#<script src="../../static/assets/scripts/modernizr.js"></script>#}
    {#<script src="../../static/assets/scripts/jquery.nanoscroller.js"></script>#}
    {#<script src="../../static/assets/scripts/ui.multiselect.js"></script>#}
    {#<script src="../../static/assets/scripts/functions.js"></script>#}
    {#<script type="text/javascript">#}
    {#    $(function () {#}
    {#        $(".multiselect").multiselect();#}
    {#    });#}
    {#</script>#}
    {#<script>#}
    {#    $(document).ready(function () {#}
    {#        $('#csload_list').click(function () {#}
    {#            var append = $('#csappend').val();#}
    {#            $('ul.cs-tags-selection').append('<li class="alert alert-warning"><a data-dismiss="alert" class="close" href="#">×<\/a><span>' + append + '<\/span><\/li>');#}
    {#            return false;#}
    {#        });#}
    {#    });#}
    {#</script>#}
    {#<script>#}
    {#    function HandleBrowseClick() {#}
    {#        var fileinput = document.getElementById("browse");#}
    {#        fileinput.click();#}
    {#    }#}
    {##}
    {#    function Handlechange() {#}
    {#        var fileinput = document.getElementById("browse");#}
    {#        var textinput = document.getElementById("filename");#}
    {#        textinput.value = fileinput.value;#}
    {#    }#}
    {#</script>#}
    {#</body>#}

    {% block footer %}
        {{ super() }}
    {% endblock %}

    {% block copyright %}
        {{ super() }}
    {% endblock %}

    {% block script %}
        {{ super() }}
    {% endblock %}

    {#    <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>#}
    {#    <script src="../../static/js/ckeditor.js"></script>#}
    {#    <script>#}
    {##}
    {#        ClassicEditor#}
    {#            .create(document.querySelector('#editor'),{#}
    {#plugins: [Base64UploadAdapter]#}
    {#            })#}
    {##}
    {#            .catch(error => {#}
    {#                console.error(error);#}
    {#            });#}
    {##}
    {#    </script>#}
    <script src="../../static/js/ckeditor1.js"></script>
    <script>ClassicEditor
        .create(document.querySelector('#editor'), {

            toolbar: {
                items: [
                    'alignment',
                    '|',
                    'link',
                    '|',
                    'imageUpload',
                    '|',
                    'imageInsert',
                    '|',
                    'mediaEmbed',
                    '|',
                    'undo',
                    '|',
                    'redo',
                    '|',
                    'blockQuote',
                    '|',
                    'bold',
                    '|',
                    'code',
                    '|',
                    'codeBlock',
                    '|',
                    'fontBackgroundColor',
                    '|',
                    'fontColor',
                    '|',
                    'fontSize',
                    '|',
                    'horizontalLine',
                    '|',
                    'heading',
                    '|',
                    '|',
                    'highlight',
                    '|',
                    'fontFamily',
                    '|',
                    'htmlEmbed',
                    '|',
                    'indent',
                    '|',
                    'outdent',
                    '|',
                    'italic',
                    '|',
                    'numberedList',
                    '|',
                    'bulletedList',
                    '|',
                    'pageBreak',
                    '|',
                    'specialCharacters',
                    '|',
                    'subscript',
                    '|',
                    'strikethrough',
                    '|',
                    'superscript',
                    '|',
                    'insertTable',
                    '|',
                    'textPartLanguage',
                    '|',
                    'underline',
                    '|',
                    'todoList',
                    '|',
                    '|'
                ]
            },
            language: 'zh-cn',
            image: {
                toolbar: [
                    'imageTextAlternative',
                    'imageStyle:full',
                    'imageStyle:side',
                    'linkImage'
                ]
            },
            table: {
                contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells',
                    'tableCellProperties',
                    'tableProperties'
                ]
            },
            licenseKey: '',


        })
        .then(editor => {
            window.editor = editor;


        })
        .catch(error => {
            console.error('Oops, something went wrong!');
            console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
            console.warn('Build id: obxreno99ko0-6a0pk663jn33');
            console.error(error);
        });
    </script>

    {#    图片上传js#}
    <script>
        ipt.onchange = function () {
            img.src = URL.createObjectURL(this.files[0])
            console.log(this.files)

        }

    </script>

    <script>
        function printFile(file) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                console.log(evt.target.result);
            };
            reader.readAsText(file);
        }

    </script>
    {#    图片上传js#}

{% endblock %}
</html>